<template>
  <hm-layout>
    <view class="home-content">
      <view class="avatar-list" v-if="templateList.length > 0 && firstLoaded">
      	<view class="avatar-item" v-for="(item, index) in templateList"  @click="pageTo(item)">
      		<image class="avatar-image" :src="item.previewUrl" lazyLoad />
      		<view class="avatar-name">{{ item.name }}</view>
      	</view>
        <view class="avatar-item avatar-plus" v-if="isAndroid" @click="goShop()">
          <view class="border">
            <u-icon class="plus-icon" name="plus" size="68"></u-icon>
            <view class="plus-text">更多</view>
          </view>
        	<view class="avatar-name"></view>
        </view>
      </view>
      <view v-if="firstLoaded && templateList.length === 0" class="avatar-empty">
        <hm-empty imageUlr="collect" v-text="暂无模板">
          <button v-if="isAndroid" class="ss-reset-button buy-btn ui-BG-Main-Gradient" @tap="goShop">
            立即购买
          </button>
        </hm-empty>
      </view>
    </view>
  </hm-layout>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  let activeIndex = ref(0)
  let templateList = ref([])
  let firstLoaded = ref(false)
  const isAndroid = vk.myfn.HmUtils.isAndroid
  const change = (index) => {
    console.log(index)
  }
  onShow(() => {
    getTemplateList()
  })
  const getTemplateList = () => {
    vk.callFunction({
    	url: 'client/template/kh/myTemplate',
    	title: '请求中...',
    	data: {
    		pageIndex: 1,
    		pageSize: 100,
    	},
    	success(data) {
        firstLoaded.value = true
    	  const { rows = [] } = data;
    	  // 修改成功
    	  templateList.value = rows;
    	},
    	fail(error) {
        firstLoaded.value = true
    	  vk.toast('查询失败,请稍后再试!');
    	},
    });
  }
  const pageTo = (template) => {
    vk.navigateTo({
    	url: `${template.path}?t=${template.template_id}`,
    	events: {
    		// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    		update: (data) => {
    			// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
    		}
    	},
    	success: (res) => {
    		res.eventChannel.emit('acceptDataFromOpenerPage', {
    			[template.path]: template,
    		})
    	}
    })
  }
  const goShop = () => {
  	vk.navigateTo({
  	  url: "/pages/creator/template-shop"
  	})
  }
</script>
<style lang="scss">

.home-content {
	padding: 0 10rpx;
	position: relative;
	z-index: 1;

	.avatar-list {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;

		.avatar-item {
			width: 33.33%;
			margin-top: 10rpx;
			border-radius: 8px;
			border: 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.avatar-name {
			font-size: 22rpx;
			width: 100%;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
		}

		image {
			border-radius: 4px;
			border: 0px;
		}

		.avatar-image {
			border-radius: 4px;
			border: 0px;
			width: 212rpx;
			height: 212rpx;
		}
    .avatar-plus {
      .border {
        width: 212rpx;
        height: 212rpx;
        border: 1rpx solid var(--ui-Border);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .plus-icon {
           color: var(--ui-BG-Main) !important;
        }
        .plus-text {
           font-size: 24rpx;
           margin-top: 10rpx;
           color: var(--ui-BG-Main) !important;
        }
      }
    }
	}
  
  .avatar-empty {
    .buy-btn {
      width: 300rpx;
      margin-top: 40rpx;
      height: 80rpx;
      font-weight: bold;
      font-size: 32rpx;
      letter-spacing: 8rpx;
    }
  }
}
</style>